import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Form, Icon, Input, Button } from 'antd'
import './index.less'
const FormItem = Form.Item

@connect( // 功能同 UTIL/createContainer
  ({ userData }) => ({ userData }),
  require('ACTION/user').default
)
class Login extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'Login'
    this.state = {
      app: false
    }
  }
  handleSubmit = (e) => {
    e.preventDefault()
    var rightUser = null
    this.props.form.validateFields((err, users) => {
      if (!err) {
        rightUser = users
      }
    })
    if (rightUser) {
      this.props.login(rightUser)
    }
  }
  componentDidMount() {
    console.log(this.props)
    this.setState({
      app: true
    })
  }
  componentWillUnmount() {
    this.setState({
      app: false
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form
    var { app } = this.state
    return app ? <div className="tederen-login">
      <div className="login-main">
        <div className="logo-container">
          <img src={require('ASSET/img/logo.png')}/>
        </div>
        <Form onSubmit={this.handleSubmit} className="login-form">
          <FormItem>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: '请输入用户名!' }]
            })(
              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="请输入用户名" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码!' }]
            })(
              <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="请输入密码" />
            )}
          </FormItem>
          <FormItem>
            <a className="login-form-forgot" href="#/forget">忘记密码？</a>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </FormItem>
        </Form>
      </div>
      <div id="particles-js"></div>
      {/* <script src={require('../../../static/particles/particles.min.js')}></script> */}
      <script src={require('../../../static/particles/app.js')}></script>
    </div> : null
  }
}
export default Form.create()(Login)
